<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="format-detection" content="telephone=no">
		<meta http-equiv="Cache-Control" content="no-siteapp">
		<link rel="stylesheet" href="../../../layui/css/layui.css" media="all" />
		<link rel="stylesheet" href="../../../css/public.css" media="all" />
		<link rel="stylesheet" href="../../../plugin/zTree/css/zTreeStyle/zTreeStyle.css" type="text/css">

	</head>

	<body class="childrenBody">
		<form class="layui-form" lay-filter="formTest" id="form" style="width: 80%;">

			<div class="layui-form-item layui-row layui-col-xs12">

				<label class="layui-form-label">所属部门</label>
				<div class="layui-input-inline">
					<input type="text" class="layui-input layui-disabled" id="dname" disabled lay-verify="required" placeholder=""> <input type="hidden" name="did" id="did">
				</div>
				<a class="layui-btn" id="btn_treeSelect">选择</a>
			</div>
			<div class="layui-form-item layui-row layui-col-xs12">
				<label class="layui-form-label">岗位名称</label>
				<div class="layui-input-block">
					<input type="text" class="layui-input" name="name" id="name" lay-verify="required" maxlength="32" placeholder="">
				</div>
			</div>
			<div class="layui-form-item layui-row layui-col-xs12">
				<label class="layui-form-label">排序</label>
				<div class="layui-input-block">
					<input type="text" class="layui-input" name="sort" maxlength="2" lay-verify="required|number" placeholder="">
				</div>
			</div>
			<div class="layui-form-item layui-row layui-col-xs12">
				<label class="layui-form-label">备注</label>
				<div class="layui-input-block">
					<textarea placeholder="" class="layui-textarea" name="remarks"></textarea>
				</div>
			</div>
			<div class="layui-form-item layui-row layui-col-xs12">
				<div class="layui-input-block">
					<button type="button" class="layui-btn layui-btn-sm" lay-submit="" lay-filter="submit">提交</button>
					<button type="button" class="layui-btn layui-btn-sm layui-btn-primary close-btn">取消</button>
				</div>
			</div>
		</form>
		<div id="treeDiv" class="menuContent" style="display: none; position: absolute; background: white; border: 1px black solid; z-index: 999">
			<ul id="departmentTree" class="ztree" style="margin-top: 0; width: 160px;"></ul>
		</div>
		<script type="text/javascript" src="../../../js/jquery-2.1.1.min.js"></script>
		<script type="text/javascript" src="../../../layui/layui.js"></script>
		<script type="text/javascript" src="../../../custom/js/common.js"></script>
		<script type="text/javascript" src="../../../plugin/zTree/js/jquery.ztree.core.js"></script>
		<script type="text/javascript">
			layui.use(['form', 'layer'], function() {
				var $ = layui.jquery;
				var form = layui.form;
				var layer = layui.layer;
				var toUpdateApi = constant.baseUrl + "/system/role/toUpdate";
				var toInsertApi = constant.baseUrl + "/system/role/toInsert";
				var insertApi = constant.baseUrl + "/system/role/insert";
				var updateApi = constant.baseUrl + "/system/role/update";
				var insertMethod = "post";
				var updateMethod = "put";
				var url = insertApi;
				var method = insertMethod;
				//ztree
				var setting = {
					view: {
						dblClickExpand: false
					},
					data: {
						simpleData: {
							enable: true
						}
					},
					callback: {
						onClick: onClick
					}
				};

				function onClick(e, treeId, treeNode) {
					$("#did").val(treeNode.id);
					$("#dname").val(treeNode.name);
					hideMenu();
				}

				function showMenu() {
					var cityObj = $("#dname");
					var cityOffset = $("#dname").offset();
					$("#treeDiv").css({
						left: cityOffset.left + "px",
						top: cityOffset.top + cityObj.outerHeight() + "px"
					}).slideDown("fast");
					$("body").bind("mousedown", onBodyDown);
				}

				function hideMenu() {
					$("#treeDiv").fadeOut("fast");
					$("body").unbind("mousedown", onBodyDown);
				}

				function onBodyDown(event) {
					if(!(event.target.id == "btn_treeSelect" || event.target.id == "treeDiv" || $(event.target).parents("#treeDiv").length > 0)) {
						hideMenu();
					}
				}
				$("#btn_treeSelect").click(function() {
					showMenu()
				})

				var id = getUrlParam("id");
				if(id) {
					//更新
					//禁止输入名字
					$("#name").prop("disabled", true);
					$("#name").addClass("layui-disabled");
					$("#form").append("<input type='hidden' name='pid' value='' >");
					$("#form").append("<input type='hidden' name='level' value='' >");
					$("#form").append("<input type='hidden' name='id' value='' >");
					method = updateMethod;
					url = updateApi;
					loadAjax(toUpdateApi + "/" + id, "get", null, function(response) {
						baseCallBack(response, function(response) {
							fomrVal(form, "formTest", response.data.record);
							if(response.data.department) {
								$("#dname").val(response.data.department.name);
							}
							$.fn.zTree.init($("#departmentTree"), setting, response.data.ztreeBeans);
						});
					});
				} else {
					//新增
					var pid = getUrlParam("pid");
					if(!pid) {
						$("#form").append("<input type='hidden' name='level' value='1' >");
					} else {
						var level = getUrlParam("level");
						$("#form").append("<input type='hidden' name='pid' value='" + pid + "' >");
						$("#form").append("<input type='hidden' name='level' value='" + (parseInt(level) + 1) + "' >");
					}
					loadAjax(toInsertApi, "get", null, function(response) {
						baseCallBack(response, function(response) {
							$.fn.zTree.init($("#departmentTree"), setting, response.data);
						});
					});
				}
				form.on("submit(submit)", function(data) {
					loadAjax(url, method, $("#form").serialize(), function(response) {
						baseCallBack(response, parentReloadCallBack);
					});
					return false;
				})
			})
		</script>
	</body>

</html>